<template>
    <n-space vertical justify="center" style="margin-top: 50px">
      <n-el tag="div" class="form-box">
        <n-form
            ref="formRef"
            :model="user"
            label-placement="top"
            :label-width="160"
        >
          <n-form-item label="旧密码" path="inputValue">
            <n-input v-model:value="user.oldPassword" type="password" placeholder="请输入旧密码" />
          </n-form-item>
          <n-form-item label="新密码" path="inputValue">
            <n-input v-model:value="user.password" type="password" placeholder="请输入新密码" />
          </n-form-item>
          <n-form-item label="确认密码" path="inputValue">
            <n-input v-model:value="confirmPassword" type="password" placeholder="请确认密码" />
          </n-form-item>
        </n-form>
        <n-space justify="center" style="margin-top: 20px">
          <n-button
              type="warning"
              @click="updatePassword"
          >
            修改密码
          </n-button>
        </n-space>
      </n-el>
    </n-space>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {changePassword} from "/@api/hz-system-api";
import {useMessage} from "naive-ui";
import router from "/@/router";
import {useUserConfig} from "/@bean/GlobalConfig";
const storesUserConfig = useUserConfig();

const message = useMessage();

const user = ref({
  oldPassword: '',
  password: '',
});

const confirmPassword = ref('');
function updatePassword() {
  if (user.value.oldPassword === '' || user.value.password === '') {
    message.error('密码不能为空');
    return;
  }
  if (user.value.password !== confirmPassword.value) {
    message.error('两次密码不一致');
    return;
  }
  if (user.value.oldPassword === user.value.password) {
    message.error('新旧密码不能相同');
    return;
  }
  changePassword(user.value).then((res) => {
    if (res.code === 200) {
      message.success('修改成功');
      message.success('即将跳转到登录页面...');
    //   等待3s
      setTimeout(() => {
        storesUserConfig.clearUserInfo()
        router.push('/login');
      }, 3000);
    } else {
      message.error(res.msg);
    }
  });

}
</script>

<style lang="less" scoped>
@media screen and (max-width: 768px) {
  .form-box {
    width: 85%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .form-box {
    width: 50%;
    margin: 0 auto;
  }
}
</style>